import { domUtils } from '../utils/domUtils';
import { LogService } from '../services/logService';

export class TranslationCard {
    constructor() {
        this.logger = new LogService('TranslationCard');
    }

    /**
     * 显示翻译卡片
     * @param {Object} translations 翻译结果对象
     * @param {Object} position 显示位置
     * @param {boolean} isError 是否为错误信息
     */
    show(translations, position, isError = false) {
        this.logger.debug('显示翻译卡片', { translations, position, isError });
        
        // 检查并移除已存在的卡片
        const existingCard = document.getElementById('translation-card');
        if (existingCard) {
            existingCard.remove();
            this.logger.debug('移除已存在的卡片');
        }

        // 创建并显示新卡片
        const card = this.createCard(translations, position, isError);
        document.body.appendChild(card);

        // 确保动画正确触发
        requestAnimationFrame(() => {
            card.style.opacity = '1';
            card.style.transform = 'scale(1)';
        });
    }

    /**
     * 创建翻译卡片
     * @param {Object} translations 翻译结果对象
     * @param {Object} position 显示位置
     * @param {boolean} isError 是否为错误信息
     * @returns {HTMLElement}
     */
    createCard(translations, position, isError) {
        const card = document.createElement('div');
        card.id = 'translation-card';
        
        // 基础样式设置
        card.style.cssText = `
            position: fixed;
            z-index: 10000;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            width: 320px;
            transform: scale(0.95);
            opacity: 0;
            transition: all 0.3s ease-out;
            border: 1px solid #e5e7eb;
        `;

        // 创建卡片内容
        const content = document.createElement('div');
        content.style.cssText = `
            padding: 16px;
            max-height: 400px;
            overflow-y: auto;
        `;

        // 添加原文（如果有）
        if (translations.original) {
            const originalSection = this.createSection('原文', translations.original);
            content.appendChild(originalSection);
        }

        // 添加腾讯云翻译结果
        if (translations.tencent) {
            const tencentSection = this.createSection('腾讯云翻译', translations.tencent);
            content.appendChild(tencentSection);
        }

        // 添加智谱轻言翻译结果
        if (translations.chatglm) {
            const chatglmSection = this.createSection('智谱轻言', translations.chatglm);
            content.appendChild(chatglmSection);
        }

        // 添加总结结果
        if (translations.summary) {
            const summarySection = this.createSection('文本总结', translations.summary);
            content.appendChild(summarySection);
        }

        // 添加解析结果
        if (translations.explanation) {
            const explanationSection = this.createSection('文本解析', translations.explanation);
            content.appendChild(explanationSection);
        }

        // 添加错误信息
        if (translations.error) {
            const errorSection = this.createSection('错误信息', translations.error);
            content.appendChild(errorSection);
            errorSection.lastChild.style.color = '#EF4444'; // 错误信息使用红色
        }

        // 添加关闭按钮
        const closeButton = document.createElement('button');
        closeButton.innerHTML = '×';
        closeButton.style.cssText = `
            position: absolute;
            top: 8px;
            right: 8px;
            background: none;
            border: none;
            color: #666;
            font-size: 20px;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
        `;
        closeButton.onclick = () => card.remove();

        card.appendChild(closeButton);
        card.appendChild(content);

        // 计算并设置卡片位置
        const { left, top } = this.calculatePosition(position, card);
        card.style.left = `${left}px`;
        card.style.top = `${top}px`;

        return card;
    }

    /**
     * 创建翻译结果区域
     * @param {string} title 标题
     * @param {string} content 内容
     * @returns {HTMLElement}
     */
    createSection(title, content) {
        const section = document.createElement('div');
        section.style.cssText = `
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #eee;
        `;

        const titleDiv = document.createElement('div');
        titleDiv.style.cssText = `
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
        `;
        titleDiv.textContent = title;

        const contentDiv = document.createElement('div');
        contentDiv.style.cssText = `
            font-size: 14px;
            color: #2c3e50;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        `;
        contentDiv.textContent = content;

        section.appendChild(titleDiv);
        section.appendChild(contentDiv);
        return section;
    }

    /**
     * 计算卡片位置
     * @param {Object} position 鼠标位置
     * @param {HTMLElement} card 卡片元素
     * @returns {Object} 计算后的位置
     */
    calculatePosition(position, card) {
        const SPACING = 10;
        const rect = card.getBoundingClientRect();
        let left = position.x;
        let top = position.y + SPACING;

        // 确保卡片不会超出视口
        if (left + rect.width > window.innerWidth) {
            left = window.innerWidth - rect.width - SPACING;
        }

        if (top + rect.height > window.innerHeight) {
            top = position.y - rect.height - SPACING;
        }

        // 确保不会出现在视口外
        left = Math.max(SPACING, left);
        top = Math.max(SPACING, top);

        return { left, top };
    }

    /**
     * 移除翻译卡片
     */
    remove() {
        const card = document.getElementById('translation-card');
        if (card) {
            card.remove();
            this.logger.debug('移除翻译卡片');
        }
    }
} 